<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sprirt 8</title>

    <!-- Bootstrap v5.3.8 样式 -->
    <link href="./assets/css/bootstrap.min.css" rel="stylesheet">

    <!-- AOS v2.3.4 样式 -->
    <link rel="stylesheet" href="./assets/css/aos.css" />

    <!-- 项目自定义样式 -->
    <link href="./assets/css/index.less" rel="stylesheet/less">

    <!-- Less v4.4.1 -->
    <script src="./assets/js/less.min.js"></script>

    <!-- Bootstrap v5.3.8 -->
    <script src="./assets/js/bootstrap.min.js" async></script>

    <!-- AOS v2.3.4 -->
    <script src="./assets/js/aos.js" defer></script>

    <!-- 项目自定义脚本 -->
    <!-- defer 对普通脚本不生效，因此声明为默认 defer 的模块脚本 -->
    <script type="module">
        AOS.init({
            once: true,  // 动画只触发一次
            easing: 'ease',  // 动画曲线
            duration: 550,  // 动画时间
            offset: 100  // 动画触发距离
        });
    </script>
</head>

<body>
    <!-- 导航栏，固定在顶部 -->
    <nav
        class="navbar fixed-top navbar-expand-md bg-body"
        data-bs-theme="dark"
    >
        <div class="container-fluid">
            <a class="navbar-brand">SPRIT8</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggler"
                aria-controls="navbar-toggler" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end" id="navbar-toggler">
                <ul class="navbar-nav nav-underline text-center">
                    <li class="nav-item"><a class="nav-link" href="#">HOME</a></li>
                    <li class="nav-item"><a class="nav-link" href="#about">ABOUT</a></li>
                    <li class="nav-item"><a class="nav-link" href="#services">SERVICES</a></li>
                    <li class="nav-item"><a class="nav-link" href="#work">PORTFOLIO</a></li>
                    <li class="nav-item"><a class="nav-link" href="#testimonials">TESTMONIALS</a></li>
                    <li class="nav-item"><a class="nav-link" href="#contact">CONTACT</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Banner 图，占满首屏 -->
    <section id="banner" class="p-page d-flex flex-column align-items-center bg-body" data-bs-theme="dark">
        <div class="flex-fill text-center d-flex flex-column justify-content-center">
            <h1 class="title fw-light text-body-tertiary" data-aos="fade-down" data-aos-delay="400">
                WELCOME ON
                <span class="brand fw-bold text-primary">SPRIT8</span>
            </h1>
            <p class="text-body-secondary" data-aos="fade-down" data-aos-delay="500">
                We are a digital agency with
                <span class="fw-bold">years of experience</span>
                and with
                <span class="fw-bold">extraordinary people</span>
            </p>
        </div>
        <div class="more border border-2 rounded-circle" data-aos="fade-down" data-aos-delay="600">
            <a class="btn p-2 rounded-circle w-100 h-100 fw-bold" href="#about">↓</a>
        </div>
    </section>

    <!-- About 关于页面 -->
    <section id="about" class="p-page d-flex flex-wrap justify-content-center">
        <img
            class="img-fluid"
            src="./assets/images/about-background.png"
            data-aos="fade-right"
        >
        <div class="about-us">
            <div class="text-body-tertiary fs-5" data-aos="fade-left">ABOUT US</div>
            <p class="fs-2" data-aos="fade-left" data-aos-delay="100">
                <span class="border-bottom border-primary border-4">SOME</span>
                WORDS <span class="fw-bold">ABOUT US</span>
            </p>
            <p class="text-body-tertiary my-4" data-aos="fade-left" data-aos-delay="200">
                We love building and rebuilding brands through our specific skills.
                Using colour, fonts, and illustration, we brand companies in way
                they will never forget.
            </p>
            <div class="text-body-secondary my-5" data-aos="fade-left" data-aos-delay="300">
                <p>
                    <img src="./assets/images/about-list-bg.png">
                    <span class="fw-bold">Misson -</span>
                    <span class="fst-italic">We deliver uniqueness and quality</span>
                </p>
                <p>
                    <img style="height: 100%;" src="./assets/images/about-list-bg.png">
                    <span class="fw-bold">Skills -</span>
                    <span class="fst-italic">Delivering fast and excellent results</span>
                </p>
                <p>
                    <img src="./assets/images/about-list-bg.png">
                    <span class="fw-bold">Clients -</span>
                    <span class="fst-italic">Satisfied clients thanks to our experience</span>
                </p>
            </div>
            <button
                class="btn btn-outline-secondary d-flex align-items-center gap-2"
                data-aos="fade-left"
                data-aos-delay="400"
            >
                <img src="./assets/images/about-btn.png">
                BROWSE OUR WORK
            </button>
        </div>
    </section>

    <!-- Team 团队页面 -->
    <section id="team" class="p-page text-center d-flex flex-column gap-5 bg-body text-body" data-bs-theme="dark">
        <h1 class="title-underline p-4 fw-light" data-aos="zoom-out">
            MEET
            <span class="fw-bold">OUR TEAM</span>
        </h1>
        <div class="d-flex flex-wrap gap-4">
            <div 
                class="info d-flex flex-column align-items-center"
                data-aos="zoom-out"
            >
                <div class="avatar rounded-circle my-2"></div>
                <div class="fs-5 fw-bold">Jason Statham</div>
                <div>Knife designer</div>
                <div class="my-4">
                    Do not seek to change what has come before.
                    Seek to create that which has not.
                </div>
            </div>
            <div
                class="info d-flex flex-column align-items-center"
                data-aos="zoom-out"
                data-aos-delay="100"
            >
                <div class="avatar rounded-circle my-2"></div>
                <div class="fs-5 fw-bold">Van Damme</div>
                <div>No English</div>
                <div class="my-4">
                    Do not seek to change what has come before.
                    Seek to create that which has not.
                </div>
            </div>
            <div
                class="info d-flex flex-column align-items-center"
                data-aos="zoom-out"
                data-aos-delay="200"
            >
                <div class="avatar rounded-circle my-2"></div>
                <div class="fs-5 fw-bold">Sylvester Stallone</div>
                <div>Cigar Lover</div>
                <div class="my-4">
                    Do not seek to change what has come before.
                    Seek to create that which has not.
                </div>
            </div>
            <div
                class="info d-flex flex-column align-items-center"
                data-aos="zoom-out"
                data-aos-delay="300"
            >
                <div class="avatar rounded-circle my-2"></div>
                <div class="fs-5 fw-bold">Jet Li</div>
                <div>I need more money</div>
                <div class="my-4">
                    Do not seek to change what has come before.
                    Seek to create that which has not.
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-center gap-3" data-aos="zoom-out">
            <div class="cube bg-primary"></div>
            <div class="cube"></div>
            <div class="cube"></div>
        </div>
    </section>

    <!-- Services 服务页面 -->
    <section id="services" class="p-page d-flex flex-column gap-5 text-center">
        <h1 class="title-underline p-4 fw-light" data-aos="zoom-in">
            TAKE A LOOK AT
            <span class="fw-bold">OUR SERVICES</span>
        </h1>
        <p class="text-body-tertiary" data-aos="zoom-in">
            Lorem lpsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"
            (The Extremes of Good and Evil) by Cicero, written in 45 BC. This Book is a treaties
            on the theory of ethics, very popular during the Renaissance. The first line of Lorem
            lpsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
        </p>
        <div class="d-flex flex-wrap gap-4">
            <div
                class="info d-flex flex-column align-items-center gap-3"
                data-aos="zoom-in"
            >
                <img class="icon border border-5 border-primary rounded-circle" src="./assets/images/icon-pc.png">
                <div class="fw-bold fs-4">WEB DESIGN</div>
                <p>
                    The first line of Lorem lpsum, "Lorem ipsum dolor sit amet..",
                    comes from a line in section 1.10.32.
                </p>
            </div>
            <div
                class="info d-flex flex-column align-items-center gap-3"
                data-aos="zoom-in"
                data-aos-delay="100"
            >
                <img class="icon border border-5 border-primary rounded-circle" src="./assets/images/icon-phone.png">
                <div class="fw-bold fs-4">MOBILE APPS</div>
                <p>
                    The first line of Lorem lpsum, "Lorem ipsum dolor sit amet..",
                    comes from a line in section 1.10.32.
                </p>
            </div>
            <div
                class="info d-flex flex-column align-items-center gap-3"
                data-aos="zoom-in"
                data-aos-delay="200"
            >
                <img class="icon border border-5 border-primary rounded-circle" src="./assets/images/icon-camera.png">
                <div class="fw-bold fs-4">PHOTOGRAPHY</div>
                <p>
                    The first line of Lorem lpsum, "Lorem ipsum dolor sit amet..",
                    comes from a line in section 1.10.32.
                </p>
            </div>
            <div
                class="info d-flex flex-column align-items-center gap-3"
                data-aos="zoom-in"
                data-aos-delay="300"
            >
                <img class="icon border border-5 border-primary rounded-circle" src="./assets/images/icon-speaker.png">
                <div class="fw-bold fs-4">MARKETING</div>
                <p>
                    The first line of Lorem lpsum, "Lorem ipsum dolor sit amet..",
                    comes from a line in section 1.10.32.
                </p>
            </div>
        </div>
    </section>

    <!-- Clients 客户页面 -->
    <section class="p-page d-flex flex-column gap-5 bg-body text-body" data-bs-theme="dark">
        <h1 class="title-underline p-4 text-center fw-light" data-aos="fade-up">
            SOME OF
            <span class="fw-bold">OUR CLIENTS</span>
        </h1>
        <div class="d-flex flex-wrap gap-5 justify-content-center align-items-center m-5">
            <img src="./assets/images/client-1.png" data-aos="fade-up">
            <img src="./assets/images/client-2.png" data-aos="fade-up" data-aos-delay="100">
            <img src="./assets/images/client-3.png" data-aos="fade-up" data-aos-delay="200">
            <img src="./assets/images/client-4.png" data-aos="fade-up" data-aos-delay="300">
            <img src="./assets/images/client-5.png" data-aos="fade-up" data-aos-delay="400">
        </div>
        <div class="d-flex justify-content-center gap-3" data-aos="fade-up" data-aos-delay="100">
            <div class="cube bg-primary"></div>
            <div class="cube"></div>
            <div class="cube"></div>
        </div>
    </section>

    <!-- Work 作品页面 -->
    <section id="work" class="p-page d-flex flex-column gap-5 text-center">
        <h1 class="title-underline p-4 fw-light" data-aos="flip-left">
            TAKE A LOOK AT
            <span class="fw-bold">OUR WORK</span>
        </h1>
        <p class="text-body-tertiary fst-italic" data-aos="flip-left">
            Lorem lpsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"
            (The Extremes of Good and Evil) by Cicero, written in 45 BC. This Book is a treaties
            on the theory of ethics, very popular during the Renaissance. The first line of Lorem
            lpsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
        </p>
        <div>
            <div
                class="d-flex justify-content-between align-items-center flex-wrap gap-3 my-5"
                data-aos="flip-left"
            >
                <div class="fw-bold">FILTER BY TYPE</div>
                <div class="d-flex gap-2 text-body-tertiary flex-wrap">
                    <span class="fw-bold text-body">All</span>
                    <span>|</span>
                    <span>Web design</span>
                    <span>|</span>
                    <span>Mobile design</span>
                    <span>|</span>
                    <span>Photography</span>
                </div>
            </div>
            <div class="d-flex gap-4 flex-wrap justify-content-around">
                <img class="img-fluid" src="./assets/images/work-1.png" data-aos="flip-left">
                <img class="img-fluid" src="./assets/images/work-1.png" data-aos="flip-left" data-aos-delay="25">
                <img class="img-fluid" src="./assets/images/work-1.png" data-aos="flip-left" data-aos-delay="50">
                <img class="img-fluid" src="./assets/images/work-1.png" data-aos="flip-left" data-aos-delay="75">
                <img class="img-fluid" src="./assets/images/work-2.png" data-aos="flip-left" data-aos-delay="100">
                <img class="img-fluid" src="./assets/images/work-2.png" data-aos="flip-left" data-aos-delay="125">
                <img class="img-fluid" src="./assets/images/work-2.png" data-aos="flip-left" data-aos-delay="150">
                <img class="img-fluid" src="./assets/images/work-2.png" data-aos="flip-left" data-aos-delay="175">
                <img class="img-fluid" src="./assets/images/work-3.png" data-aos="flip-left" data-aos-delay="200">
                <img class="img-fluid" src="./assets/images/work-3.png" data-aos="flip-left" data-aos-delay="225">
                <img class="img-fluid" src="./assets/images/work-3.png" data-aos="flip-left" data-aos-delay="250">
                <img class="img-fluid" src="./assets/images/work-3.png" data-aos="flip-left" data-aos-delay="275">
            </div>
        </div>
    </section>

    <!-- Testimonials 推荐信页面 -->
    <section id="testimonials" class="p-page d-flex flex-column gap-5 bg-body text-body text-center" data-bs-theme="dark">
        <h1 class="title-underline p-4 fw-light" data-aos="slide-up">
            <span class="fw-bold">OUR ClIENTS'</span>
            TESTMONIALS
        </h1>
        <p class="detail fs-5 mt-5" data-aos="slide-up">
            THIS BOOK IS A TREATIESE ON THE THEORY OF ETHICS, VERY POPULAR DURING THE RENAISSANCE.
            THE FIRST LINE OF LOREM IPSUM, "LOREM IPSUM DOLOR SIT AMET..", COMES FROM A LINE IN SECTION 1.10.32.
        </p>
        <p class="text-body-tertiary" data-aos="slide-up" data-aos-delay="100">
            <span class="fw-bold">Dean Martin,</span> CEO Acame Inc.
        </p>
        <div class="d-flex justify-content-center gap-3" data-aos="slide-up">
            <div class="cube bg-primary"></div>
            <div class="cube"></div>
            <div class="cube"></div>
        </div>
    </section>

    <!-- Contact 联系页面 -->
    <section id="contact" class="p-page d-flex flex-column gap-5 text-center">
        <h1 class="title-underline p-4 text-center fw-light" data-aos="zoom-in">
            FEEL FREE TO
            <span class="fw-bold">CONTACT US</span>
        </h1>
        <p class="text-body-tertiary fst-italic" data-aos="zoom-in">
            Lorem lpsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"
            (The Extremes of Good and Evil) by Cicero, written in 45 BC. This Book is a treaties
            on the theory of ethics, very popular during the Renaissance.
        </p>
        <form class="text-start d-flex flex-column gap-4">
            <div class="d-flex flex-wrap gap-4" data-aos="zoom-in">
                <div class="flex-input">
                    <label for="name-input" class="form-label text-body-secondary">Name <sup>*</sup></label>
                    <input class="form-control" id="name-input">
                </div>
                <div class="flex-input" data-aos="zoom-in" data-aos-delay="100">
                    <label for="email-input" class="form-label text-body-secondary">Email address <sup>*</sup></label>
                    <input type="email" class="form-control" id="email-input">
                </div>
            </div>
            <div data-aos="zoom-in" data-aos-delay="200">
                <label for="message-input" class="form-label text-body-secondary">Message <sup>*</sup></label>
                <textarea class="form-control" id="message-input" rows="6"></textarea>
            </div>
            <button class="btn btn-primary ms-auto d-block" data-aos="zoom-in" data-aos-delay="300">
                SEND
            </button>
        </form>
    </section>

    <!-- Footer 页脚 -->
    <footer class="bg-body d-flex flex-wrap gap-3 justify-content-between align-items-center" data-bs-theme="dark">
        <div class="copyright text-body-tertiary">
            ALL RIGHTS RESERVED. COPYRIGHT © 2014
            <span class="fw-bold">SPIRIT8</span>
        </div>
        <div class="d-flex gap-3">
            <img class="icon border border-2 rounded-circle" src="./assets/images/footer-1.png">
            <img class="icon border border-2 rounded-circle" src="./assets/images/footer-2.png">
            <img class="icon border border-2 rounded-circle" src="./assets/images/footer-3.png">
            <img class="icon border border-2 rounded-circle" src="./assets/images/footer-4.png">
            <img class="icon border border-2 rounded-circle" src="./assets/images/footer-5.png">
        </div>
    </footer>
</body>

</html>